<template>
  <div>
    <el-form-item label="请选择类型" prop="imageList.serviceType">
      <el-select v-model="form.imageList.serviceType" placeholder="请选择类型">
        <el-option
          v-for="item in this.dict.application_type"
          :key="item.id"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="是否显示图标" prop="imageList.isShowImage">
      <el-radio-group v-model="form.imageList.isShowImage" style="width: 180px">
        <el-radio
          v-for="item in this.dict.whether_type"
          :key="item.id"
          :label="item.value"
        >{{ item.label }}
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      label="显示条数"
      prop="imageList.xsts"
    >
      <el-input-number v-model="form.imageList.xsts" style="width: 180px" />
    </el-form-item>
    <el-form-item label="查询条件" prop="imageList.queryParameter">
      <el-input
        v-model="form.imageList.queryParameter"
        placeholder="填写查询条件，如:sftj=1"
        style="width: 500px"
      />
    </el-form-item>
    <el-form-item label="列宽" prop="imageList.lk">
      <el-input
        v-model="form.imageList.lk"
        placeholder="列宽"
        style="width: 180px"
      />
    </el-form-item>
    <el-form-item label="排序方式" prop="imageList.orderParameter">
      <el-input
        v-model="form.imageList.orderParameter"
        placeholder="填写排序方式，如：order by fbsj desc"
        style="width: 180px"
      />
    </el-form-item>
    <!--    <el-form-item label="是否显示更多" prop="imageList.isMore">
      <el-radio-group v-model="form.imageList.isMore" style="width: 180px">
        <el-radio
          v-for="item in this.dict.whether_type"
          :key="item.id"
          :label="item.value"
        >{{ item.label }}
        </el-radio>
      </el-radio-group>
    </el-form-item>-->
    <el-form-item label="更多查询地址" prop="imageList.moreUrl">
      <el-input
        v-model="form.imageList.moreUrl"
        placeholder="请输入更多查询地址"
        style="width: 500px"
      />
    </el-form-item>
  </div>
</template>
<script>
import imageList from '@/api/system/imageList'

export default {
  name: 'ComponentImageList',
  dicts: ['application_type', 'whether_type'],
  props: {
    form: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      rules: {
        columnName: [
          { required: true, message: '请输入栏目名称', trigger: 'blur' }
        ],
        icon: [
          { required: true, message: '栏目图标不能为空', trigger: 'blur' }
        ],
        imageList: {
          serviceType: [
            { required: true, message: '请选择类型', trigger: 'change' }
          ],
          xsts: [{ required: true, message: '显示条数', trigger: 'blur' }]
        }
      }
    }
  },
  mounted() {
    this.$emit('getRules', this.rules)
    const id = this.form.id
    if (id != null) {
      imageList.getEntity(id).then(res => {
        this.form.imageList = res
        this.form.imageList.isMore = this.form.imageList.isMore.toString()
        this.form.imageList.isShowImage = this.form.imageList.isShowImage.toString()
        this.form.imageList.serviceType = this.form.imageList.serviceType.toString()
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>

</style>
